<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
<meta name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

    <meta name="author" content="ZhangPing">





<title>React Native--props的使用 | ZhangPing&#39;s Blog</title>



    <link rel="icon" href="/favicon.ico">




    <!-- stylesheets list from _config.yml -->
    
    <link rel="stylesheet" href="/css/style.css">
    



    <!-- scripts list from _config.yml -->
    
    <script src="/js/script.js"></script>
    
    <script src="/js/tocbot.min.js"></script>
    



    
    
        
    


<meta name="generator" content="Hexo 4.2.0"></head>
<body>
    <div class="wrapper">
        <header>
    <nav class="navbar">
        <div class="container">
            <div class="navbar-header header-logo"><a href="/">ZhangPing&#39;s Blog</a></div>
            <div class="menu navbar-right">
                
                    <a class="menu-item" href="/archives">Posts</a>
                
                    <a class="menu-item" href="/category">Categories</a>
                
                    <a class="menu-item" href="/tag">Tags</a>
                
                    <a class="menu-item" href="/about">About</a>
                
                <input id="switch_default" type="checkbox" class="switch_default">
                <label for="switch_default" class="toggleBtn"></label>
            </div>
        </div>
    </nav>

    
    <nav class="navbar-mobile" id="nav-mobile">
        <div class="container">
            <div class="navbar-header">
                <div>
                    <a href="/">ZhangPing&#39;s Blog</a><a id="mobile-toggle-theme">·&nbsp;Light</a>
                </div>
                <div class="menu-toggle" onclick="mobileBtn()">&#9776; Menu</div>
            </div>
            <div class="menu" id="mobile-menu">
                
                    <a class="menu-item" href="/archives">Posts</a>
                
                    <a class="menu-item" href="/category">Categories</a>
                
                    <a class="menu-item" href="/tag">Tags</a>
                
                    <a class="menu-item" href="/about">About</a>
                
            </div>
        </div>
    </nav>

</header>
<script>
    var mobileBtn = function f() {
        var toggleMenu = document.getElementsByClassName("menu-toggle")[0];
        var mobileMenu = document.getElementById("mobile-menu");
        if(toggleMenu.classList.contains("active")){
           toggleMenu.classList.remove("active")
            mobileMenu.classList.remove("active")
        }else{
            toggleMenu.classList.add("active")
            mobileMenu.classList.add("active")
        }
    }
</script>
        <div class="main">
            <div class="container">
    
    
        <div class="post-toc">
    <div class="tocbot-list">
    </div>
    <div class="tocbot-list-menu">
        <a class="tocbot-toc-expand" onclick="expand_toc()">Expand all</a>
        <a onclick="go_top()">Back to top</a>
        <a onclick="go_bottom()">Go to bottom</a>
    </div>
</div>

<script>
    document.ready(
        function () {
            tocbot.init({
                tocSelector: '.tocbot-list',
                contentSelector: '.post-content',
                headingSelector: 'h1, h2, h3, h4, h5',
                collapseDepth: 1,
                orderedList: false,
                scrollSmooth: true,
            })
        }
    )

    function expand_toc() {
        var b = document.querySelector(".tocbot-toc-expand");
        tocbot.init({
            tocSelector: '.tocbot-list',
            contentSelector: '.post-content',
            headingSelector: 'h1, h2, h3, h4, h5',
            collapseDepth: 6,
            orderedList: false,
            scrollSmooth: true,
        });
        b.setAttribute("onclick", "collapse_toc()");
        b.innerHTML = "Collapse all"
    }

    function collapse_toc() {
        var b = document.querySelector(".tocbot-toc-expand");
        tocbot.init({
            tocSelector: '.tocbot-list',
            contentSelector: '.post-content',
            headingSelector: 'h1, h2, h3, h4, h5',
            collapseDepth: 1,
            orderedList: false,
            scrollSmooth: true,
        });
        b.setAttribute("onclick", "expand_toc()");
        b.innerHTML = "Expand all"
    }

    function go_top() {
        window.scrollTo(0, 0);
    }

    function go_bottom() {
        window.scrollTo(0, document.body.scrollHeight);
    }

</script>
    

    
    <article class="post-wrap">
        <header class="post-header">
            <h1 class="post-title">React Native--props的使用</h1>
            
                <div class="post-meta">
                    
                        Author: <a itemprop="author" rel="author" href="/">ZhangPing</a>
                    

                    
                        <span class="post-time">
                        Date: <a href="#">November 10, 2017&nbsp;&nbsp;21:30:00</a>
                        </span>
                    
                    
                        <span class="post-category">
                    Category:
                            
                                <a href="/categories/React-Native/">React Native</a>
                            
                        </span>
                    
                </div>
            
        </header>

        <div class="post-content">
            <p>props是properties(属性、性能)的缩写，我们可以通过他把任意类型的数据传递给组件。<br>大部分组件从Props获取数据并渲染 ，值得注意的是，props是只读的。</p>
<h4 id="使用props"><a href="#使用props" class="headerlink" title="使用props"></a>使用props</h4><p>通过上一个页面传递</p>
<p>新建一个 PropsTest.js 文件</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">exprot <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">PropsTest</span> <span class="title">extendes</span> <span class="title">Component</span></span>&#123;</span><br><span class="line">  render()&#123;</span><br><span class="line">    return &lt;Text&gt;&#123;this.props.name&#125;&lt;/Text&gt;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>在上一个页面中使用PropsTest组件</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> PropsTest from <span class="string">'./PropsTest'</span></span><br><span class="line">&lt;PropsTest </span><br><span class="line">  name = <span class="string">'张三'</span></span><br><span class="line">/&gt;</span><br></pre></td></tr></table></figure>

<h4 id="默认属性，以及它的作用"><a href="#默认属性，以及它的作用" class="headerlink" title="默认属性，以及它的作用"></a>默认属性，以及它的作用</h4><p>由于props的属性都是上个页面传递的，所以无法修改它。但是我们可以在PropsTest文件中，给props定义一些默认的值。</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">exprot <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">PropsTestextends</span> <span class="title">Component</span></span>&#123;</span><br><span class="line">  <span class="keyword">static</span> defaultProps=&#123;</span><br><span class="line">    name: <span class="string">'李四'</span></span><br><span class="line">  &#125;</span><br><span class="line">  render()&#123;</span><br><span class="line">    return &lt;Text&gt;&#123;this.props.name&#125;&lt;/Text&gt;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>注意，defaultProps 需要使用static关键字来做静态修饰。这样，如果上个页面没有传值，则显示的是这个默认的属性。</p>
<h4 id="对props进行约束和检查"><a href="#对props进行约束和检查" class="headerlink" title="对props进行约束和检查"></a>对props进行约束和检查</h4><figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">exprot <span class="keyword">default</span> <span class="class"><span class="keyword">class</span> <span class="title">PropsTestextends</span> <span class="title">Component</span></span>&#123;</span><br><span class="line">  <span class="keyword">static</span> defaultProps=&#123;</span><br><span class="line">    name: <span class="string">'李四'</span></span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">static</span> propTypes=&#123;</span><br><span class="line">    name: PropTypes.string,</span><br><span class="line">    age: PropTypes.number,</span><br><span class="line">    sex: PropTypes.string.isRequired</span><br><span class="line">  &#125;</span><br><span class="line">  render()&#123;</span><br><span class="line">    return &lt;Text&gt;&#123;this.props.name&#125;&lt;/Text&gt;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>对props里面的属性进行类型判断，可以使用propTypes来做到，同样需要使用static关键字来修饰。</p>
<p>isRequired 可以指定必填项</p>
<p>注意:</p>
<p>propTypes属性 在 react 包中，需要先导入才能使用。</p>
<h4 id="props延伸操作符"><a href="#props延伸操作符" class="headerlink" title="props延伸操作符"></a>props延伸操作符</h4><p>ES6的最新语法</p>
<p>假如我们的组件需要好多属性，如下：</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">params = &#123;name: <span class="string">'XiaoZhang'</span>, age: <span class="number">18</span>, sex: <span class="string">'男'</span>&#125;</span><br><span class="line"><span class="comment">// 如果需要传递给下一个页面需要：</span></span><br><span class="line">&lt;PropsTest</span><br><span class="line">  name = &#123;params.name&#125;</span><br><span class="line">  sex = &#123;params.sex&#125;</span><br><span class="line">  age = &#123;params.age&#125;</span><br><span class="line">/&gt;</span><br><span class="line"><span class="comment">// 等等，这样如果属性特别多，代码将会变得难以维护。</span></span><br></pre></td></tr></table></figure>

<p>在ES6中可以使用最新的延伸操作符特性</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;PropsTest</span><br><span class="line">  &#123;...params&#125;</span><br><span class="line">/&gt;</span><br></pre></td></tr></table></figure>

<p>非常的简洁</p>
<h4 id="props解构赋值"><a href="#props解构赋值" class="headerlink" title="props解构赋值"></a>props解构赋值</h4><p>ES6的最新语法</p>
<p>通过延伸操作符传递的对象，在另一个组件中想要从中获取某几个来使用，可以用解构赋值的方式</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> &#123;name, age&#125; = params;</span><br><span class="line"><span class="comment">// 其他地方就可以直接引用name和age了</span></span><br><span class="line">&#123;name&#125;或&#123;age&#125;</span><br><span class="line"><span class="comment">// 这么做的好处，同样是不需要使用如下的传统方式</span></span><br><span class="line">&#123;params.name&#125;或&#123;params.age&#125;</span><br></pre></td></tr></table></figure>
<p><img src="https://github.com/zhangpingV5/BlogPic/blob/master/React%20Native--props%E7%9A%84%E4%BD%BF%E7%94%A8/1.jpg?raw=true" alt=""></p>

        </div>

        
            <section class="post-copyright">
                
                    <p class="copyright-item">
                        <span>Author:</span>
                        <span>ZhangPing</span>
                    </p>
                
                
                    <p class="copyright-item">
                        <span>Permalink:</span>
                        <span><a href="https://zhangpingv5.gitee.io/2017/11/10/React%20Native--props%E7%9A%84%E4%BD%BF%E7%94%A8/">https://zhangpingv5.gitee.io/2017/11/10/React%20Native--props%E7%9A%84%E4%BD%BF%E7%94%A8/</a></span>
                    </p>
                
                
                    <p class="copyright-item">
                        <span>License:</span>
                        <span>转载请注明出处</span>
                    </p>
                
                
                     <p class="copyright-item">
                         <span>Slogan:</span>
                         <span>Self-descipline grants me freedom.</span>
                     </p>
                

            </section>
        
        <section class="post-tags">
            <div>
                <span>Tag(s):</span>
                <span class="tag">
                    
                    
                        <a href="/tags/RN/"># RN</a>
                    
                        <a href="/tags/RN%E5%9F%BA%E7%A1%80/"># RN基础</a>
                    
                        
                </span>
            </div>
            <div>
                <a href="javascript:window.history.back();">back</a>
                <span>· </span>
                <a href="/">home</a>
            </div>
        </section>
        <section class="post-nav">
            
                <a class="prev" rel="prev" href="/2017/11/10/JavaScript--jQuery%E7%AE%80%E4%BB%8B%E5%92%8C%E5%AE%89%E8%A3%85/">JavaScript--jQuery简介和安装</a>
            
            
            <a class="next" rel="next" href="/2017/11/06/React%20Native--%E7%BB%84%E4%BB%B6%E7%9A%84%E5%AF%BC%E5%85%A5%E4%B8%8E%E5%AF%BC%E5%87%BA/">React Native--组件的导入与导出</a>
            
        </section>


    </article>
</div>

        </div>
        <footer id="footer" class="footer">
    <div class="copyright">
        <span>© ZhangPing | Powered by <a href="https://hexo.io" target="_blank">Hexo</a> & <a href="https://github.com/Siricee/hexo-theme-Chic" target="_blank">Chic</a></span>
    </div>
</footer>

    </div>
</body>
</html>
